
.page-member-center {
	min-height: 82vh;
	.buy-member {
		margin-top: 20px;
		box-sizing: border-box;
		min-height: 55.4vh;
		padding: 75px 155px;
		.tit {
			display: flex;
			justify-content: center;
			align-items: center;
			.tit-bg {
				width: 44px;
				height: 10px;
				background: url(@/assets/images/member-pic/member-tit-bg.png) no-repeat;
			}
			.tit-bg.tit-r {
				transform: rotate(180deg);
			}
			.text {
				margin: 0 20px;
				font-size: 18px;
				font-weight: 600;
			}
		}
		.item-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			.item {
				position: relative;
				width: 405px;
				height: 243px;
				box-sizing: border-box;
				padding: 30px;
				color: #fff;
				margin-top: 70px;
				box-shadow: 0 10px 20px rgba(0,0,0,.1);
				border-radius: 10px;
				.bg {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					img {
						width: 100%;
						height: 100%;
						border-radius: 5px;
					}
				}
				.text-box {
					position: relative;
				}
				.level {
					font-size: 26px;
					font-family: arial,sans-serif;
				}
				.time {
					margin-top: 10px;
					font-family: arial,sans-serif;
					opacity: 0.8;
				}
				.price {
					margin-top: 20px;
					justify-content: flex-end;
					font-size: 24px;
					color: #fff;
					margin-right: 10px;
					.big {
						font-size: 40px;
					}
				}
				.btn-box {
					margin-top: 20px;
					display: flex;
					align-items: center;
					.limit {
						flex: 1;
						margin-right: 20px;
						font-size: 14px;
						font-family: arial,sans-serif;
					}
					.btn {
						background: rgba(0,0,0,.1);
						font-size: 14px;
						border-radius: 36px;
						cursor: pointer;
						width: 120px;
						height: 36px;
						line-height: 36px;
						text-align: center;
						letter-spacing: 2px;
						color: #f9f9f9;
						&:hover {
							background: rgba(0,0,0,.15);
							color: #fff;
						}
					}
					.btn.default {
						opacity: 0.5;
						cursor: not-allowed;
						&:hover {
							background: rgba(0,0,0,.1);
							color: #f9f9f9;
						}
					}
				}
			}
		}
	}
  .popup-box {
    .con {
      .pay-number {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 30px 10px;
        height: 19px;
        font-size: 14px;
        .number {
          color: #e1251b;
          margin: 0 3px;
        }
      }
      .pay-way {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        .item {
          width: 174px;
          height: 60px;
          line-height: 60px;
          margin: 0 10px;
          border: 1px solid #e0e0e0;
          text-align: center;
          cursor: pointer;
          overflow: hidden;
          -moz-transition: all 0.2s;
          -webkit-transition: all 0.2s;
          -o-transition: all 0.2s;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          .paypal-logo {
            width: 30px;
            height: 34px;
            position: absolute;
            top: 14px;
            left: 28px;
          }
          .paypal-text {
            width: 80px;
            height: 26px;
            position: absolute;
            top: 20px;
            left: 62px;
          }
          img {
            display: block;
            width: 28px;
            height: 28px;
            margin-right: 10px;
          }
          &:hover {
            border-color: #e1251b;
          }
        }
        .paypal {
          display: flex;
          position: relative;
        }
      }
    }
  }
  .weixin-pay-code {
    height: 320px;
    .text {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin-top: 10px;
    }
    .qrcode {
      margin: 20px auto;
      font-size: 0;
      width: 196px;
      height: 196px;
      border: 1px solid #eee;
    }
    .btn-box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      .btn {
        background: #e1251b;
        height: 32px;
        line-height: 32px;
        border-radius: 32px;
        width: 90px;
        text-align: center;
        color: #fff;
      }
      .btn.gray {
        background: #fff;
        color: #000;
        border: 1px solid #ddd;
        width: 80px;
        margin-left: 20px;
      }
    }
  }
}

